<template>
	<div>
		<view>
			<!-- #ifdef MP-WEIXIN -->
			<view v-if="canIUse">
				<view class='header'>
					<view class="user_center_top_content" @click="toprot">
						<open-data class='view_opdataurl' type="userAvatarUrl"></open-data>
						<open-data class='view_opdataname' type="userNickName" lang="zh_CN"></open-data>
					</view>
				</view>
				<view class='content'>
					<view>申请获取以下权限</view>
					<text>获得你的个人信息(昵称，手机号等)</text>
				</view>
				<view>
					<button class='bottom' type='primary' open-type="getPhoneNumber" lang="zh_CN" @bindgetphonenumber='bindgetphonenumber'>
						授权登录
					</button>
				</view>
				<view bindtap='bindimage' class="grid_cell_new">
					<image src='https://www.ahlinghui.com/Uploads/image/20190429/images/login.png'></image>
				</view>
			</view>
			<view wx:else>请升级微信版本</view>
			<!-- #endif -->

			<!-- #ifdef APP-PLUS -->
			<button type="primary">{{user}}</button>
			<view class="uni-btn-v uni- uni-common-mt">
				<button type="primary" class="page-body-button" open-type="getUserInfo" @click="tologin">微信登录</button>
			</view>
			<!-- #endif -->
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				providerList: [],
				canIUse: uni.canIUse('button.open-type.getPhoneNumber'),
				user:'微信登录'
			}
		},
		mounted() {
			// uni.showToast({
			//     title: 'mounted',
			//     duration: 2000
			// });
		},
		methods: {
			// ...mapMutations(['login']),
			tologin() {
				uni.showToast({
					title: '点击',
					duration: 1000
				});
				let that = this
				uni.login({
					provider:'weixin',
					success: function(loginRes) {
						
						// 获取用户信息
						uni.getUserInfo({
							provider: 'weixin',
							success: function(infoRes) {
								uni.showToast({
									title: 'getUserInfo成功',
									duration: 2000
								});
								console.log(infoRes.userInfo.nickName)
								that.user = infoRes.userInfo.nickName
							},
							fail: (err) => {
								console.log('login fail:', err);
								uni.showToast({
									title: 'getUserInfo失败',
									duration: 2000
								});
							}
						});
					},
					fail: (err) => {
						console.log('login fail:', err);
						uni.showToast({
							title: 'login失败',
							duration: 2000
						});
					}
				});
				// uni.login({
				// 	provider: 'weixin',
				// 	// #ifdef MP-ALIPAY
				// 	scopes: 'auth_user', //支付宝小程序需设置授权类型
				// 	// #endif
				// 	success: (res) => {
				// 		console.log('login success:', res);
				// 		uni.getUserInfo({
				// 			provider: 'weixin',
				// 			success: function(infoRes) {
				// 				uni.showToast({
				// 					title: '成功',
				// 					duration: 2000
				// 				});
				// 				console.log('用户昵称为：' + infoRes.userInfo.nickName);
				// 				console.log('用户昵称为：' + JSON.stringify(infoRes));
				// 				let name = JSON.stringify(infoRes)
				// 				uni.showToast({
				// 					title: name,
				// 					duration: 2000
				// 				});
				// 			},
				// 			fail: (err) => {
				// 				console.log('login fail:', err);
				// 				uni.showToast({
				// 					title: '失败',
				// 					duration: 2000
				// 				});
				// 			}
				// 		});
				// 		// 更新保存在 store 中的登录状态
				// 		// this.login(provider.id);
				// 	},
				// 	fail: (err) => {
				// 		console.log('login fail:', err);
				// 		uni.showToast({
				// 			title: '失败',
				// 			duration: 2000
				// 		});
				// 	}
				// });
			},
			toprot() {

			},
			bindgetphonenumber() {
				uni.login({
					success: function(res) {
						console.log(res)
						if (res.code) {} else {

						}
					}
				});
			}
		},
		onLoad() {

			// 		uni.showToast({
			// 		    title: 'onload',
			// 		    duration: 2000
			// 		});
			//         uni.getProvider({
			//             service: 'oauth',
			//             success: (result) => {
			//                 this.providerList = result.provider.map((value) => {
			//                     let providerName = '';
			// 					uni.showToast({
			// 					    title: value,
			// 					    duration: 2000
			// 					});
			//                     switch (value) {
			//                         case 'weixin':
			//                             providerName = '微信登录'
			//                             break;
			//                         case 'qq':
			//                             providerName = 'QQ登录'
			//                             break;
			//                     }
			// 					
			//                     return {
			//                         name: providerName,
			//                         id: value
			//                     }
			// 					
			//                 });
			// 
			//             },
			//             fail: (error) => {
			//                 console.log('获取登录通道失败', error);
			// 				
			//             }
			//         });
		},
	};
</script>

<style>
	page {
		display: block;
		min-height: 100%;
		background-image: url('https://www.ahlinghui.com/Uploads/image/20181116/Backimage.jpg');
		background-size: cover;
		background-size: 120% 110%;
	}

	.header {
		margin: 140rpx 0 200rpx 290rpx;
		text-align: center;
		width: 200rpx;
		height: 200rpx;
	}

	.user_center_top_content .view_opdataurl {
		/* height: 3em;
    width: 3em; */
		width: 150rpx;
		height: 150rpx;
		overflow: hidden;
		display: block;
		border-radius: 50%;
		border: 1rpx solid #ccc;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
		margin-left: 11px;
	}

	.user_center_top_content .view_opdataname {
		margin-top: 10rpx;
		font-size: small;
		color: rgb(32, 31, 31);
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}

	.grid_cell_new {
		width: 30%;
		margin-left: 35%;
		margin-right: 35%;
		text-align: center;
		position: fixed;
		bottom: 0rpx;
	}

	.grid_cell_new image {
		width: 75rpx;
		height: 35rpx;
		margin-bottom: 30rpx;
		margin-top: 8px;
	}
</style>
